// 入口文件
import Vue from 'vue'
// 3.1: 导包 mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'
import app from './App.vue'
// 2.1 导包 异步请求 vue-resource
import VueResource from 'vue-resource'
import moment from 'moment'

// 11: 缩略图 
// 11.1 导包
import VuePreview from 'vue-preview'


// 1.1: 路由 导入路由的包
import VueRouter from 'vue-router'
// 1.2：把路由注入到vue上面
Vue.use(VueRouter)
// 1.3: 导入自己的路由器对象
import router from './router/router.js'

// 16：vuex  
// 16.1: 导入vuex
import Vuex from "vuex"

// 16.2  注册到vue中
Vue.use(Vuex);

// **** 每次进入网站。 肯定会走 main.js 。在刚调用的的时候，先从本地存储中获取购物车的数据
var car = JSON.parse(localStorage.getItem("car") || "[]");
// 16.3: 创建store  传递配置对象
var store = new Vuex.Store({
    // 1: 想当于组件中的data
    state:{// this.$store.state.***
        car: car,  // 存储购物车中的商品对象{id, count, title, price  ,selected 是否购买  }
    },

    // 2: 修改 store中的数据，提供的中间代理
    mutations: { // this.$store.commit("方法的名字", "按需传递唯一的参数")
        addToCar(state, goodsInfoObj){
            // 点击购物车，把商品信息保存到store中的car
            // 1: 如果购物车有数据，只需要更新数据
            // 2：如果没有则，把商品数据push到数组中即可

            var flag = false;
          

            state.car.some(item => {
            
                if(item.id == goodsInfoObj.id){
                    console.log("本来存储"+state.car[0].count);
                    console.log("传过来"+goodsInfoObj.count);
                    item.count = item.count + parseInt(goodsInfoObj.count);
                   
                     console.log("传过来:"+item.count);
                     flag = true;
                     return true;
                }
                
            })

            if(!flag){
                state.car.push(goodsInfoObj);
            }
            
            // 把所有的car存储到本地中
            localStorage.setItem("car", JSON.stringify(state.car)); 
        },

        updateToCar(state, goodsInfoObj){
            state.car.some(item => {
                if(item.id == goodsInfoObj.id){
                    item.count = goodsInfoObj.count;
                    return true;
                }
            })

            localStorage.setItem("car", JSON.stringify(state.car)); 
        },

        remove(state, id){
            state.car.some((item,i) => {
                if(item.id == id){
                    state.car.splice(i, 1);
                    return true; 
                }
            })
            localStorage.setItem("car", JSON.stringify(state.car)); 
        },

        updateGoodsSeleted(state, info){
            state.car.some(item => {
                if(item.id == info.id){
                    item.selected = info.selected;
                    return true;
                }
            })
            localStorage.setItem("car", JSON.stringify(state.car)); 
        }
    },

    // 3：相当于computer  计算属性：每当state中的值，修改的时候，也会触动get中的方法。
    getters: { // this.$getters.***
        getAllCount(state){
            var a = 0;
            state.car.forEach(item => {
                if(item.selected){
                    a += item.count;
                }
            })
            return a;
        },

        getGoodsSelected(state){
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.selected;
            });
            return o;
        },

        getGoodsCountAndAmount(state){
            var obj = {
                count: 0,
                amount: 0
            };

            state.car.forEach( item => {
                if(item.selected){
                   obj.count += item.count; 
                   obj.amount += item.price * item.count;
                   console.log(`数量：${obj.count}:价格：${item.price},总价：${item.price * item.count}`);

                }

            })

            return obj;
        }

        
    }
});


// 2.2: 注入到Vue上面
Vue.use(VueResource)

// 3.2：注入到Vue中
Vue.use(MintUI)

// 11.2： 注入到vue上面
Vue.use(VuePreview)

// 5:定义全局的过滤器
Vue.filter("dateFormat", function (dateStr, pattern = "YYYY-MM-DD HH:mm:ss") {  
    return moment(dateStr).format(pattern);
});

// 9:http全局配置
// 9.1: 全局配置url根路径
Vue.http.options.root = "http://vue.studyit.io";
// 9.2: 设置表单数据的提交格式
Vue.http.options.emulateJSON = true;

var vm = new Vue({
    el: "#app",   
    render: c => c(app),
    // 1.4：挂在路由对象
    router,
    // 16.4 挂载在vue 上面
    store
}); 